/*
 * @Descripttion: 
 * @Author: junhuafly
 * @Date: 2020-03-16 17:48:19
 * @LastEditors: junhuafly
 * @Email: junhuafly@163.com
 * @LastEditTime: 2020-04-10 17:42:33
 */
// pages/cropper/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    images: null,
    src: '',
    index: 0,
    aspectRatios: [],
    aspectRatioVal: '0.95',
    resultFiles: {}

  },
  ////////  cancel ///////////////////
  cropperCancel: function () {
    wx.navigateTo({
      url: this.backUrl || '/pages/mine/home/index'
    })
  },

  ////////// do crop ////////////////////
  cropperSubmit() {
    const _this = this
    const size = this.data.images.length - 1
    let imgGen = null

    function getResult() {
      return new Promise(async (resolve, reject) => {
        // 判断传递过来的图片是否是数组
        // 若是数组，将进行循环裁切
        if (Array.isArray(_this.data.images)) {
            _this.cropper_pos = _this.selectComponent('#cropper_hidden');
          // 定义裁切方法及裁切
          function initC(index) {
            // 当前的image图片路径
            const imagePath = _this.data.images[index].path
            // 初始化裁切组件
            _this.cropper_pos.fnInit({
              imagePath,
              aspectRatio: _this.data.aspectRatioVal
            })
            // 当前imgGen 状态，检测当前链是否到达底部
            let status = false
            // 判断当前对象是否有值
            if (!_this.data.resultFiles[`key_${index}`]) {
              wx.showLoading({
                title: '剪切中',
                mask: true,
              });
              // 当前没有保存剪切值，进行自动剪切
              _this.cropper_pos.fnCrop({
                imagePath,
                success({sWidth,sHeight,ratio,res}) {
                  console.log(res);
                  //生成文件的临时路径
                  const path = res.tempFilePath
                  const key = `resultFiles.key_${index}`
                  _this.setData({
                    [key]: {
                      path,
                      sHeight,
                      sWidth,
                      ratio
                    }
                  })
                },
                //剪裁失败的回调
                fail: function (res) {
                  wx.showToast({
                    title: '裁切失败',
                    icon: 'error',
                    duration: 800
                  });
                },
                //剪裁结束的回调
                complete: function () {
                  setTimeout(() => {
                    status = imgGen.next()
                    if (status.done) {
                      resolve(true)
                    }
                  }, 800);
                }
              })

            } else {
              setTimeout(() => {
                  status = imgGen.next()
                  if (status.done) {
                    resolve(true)
                  }
              }, 300);
            }
          }

          // 裁切开始
          _this.cropFirst(_this.data.index).then(res => {
            // 生成器
            let len = _this.pos_images.length
            function* getImage() {
              for (let index = 0; index < len; index++) {
                yield initC(index)
              }
            }
            imgGen = getImage()
            imgGen.next()
          })
        } else {
          //do crop
          this.cropper.fnCrop({
            //剪裁成功的回调
            async success({res}) {
              //生成文件的临时路径
              const path = res.tempFilePath
              _this.data.resultFiles = path
              resolve(true)
            },
            //剪裁失败的回调
            fail: function (res) {
              wx.showToast({
                title: '裁切失败',
                icon: 'error',
                duration: 800
              });
              reject(false)
            },

            //剪裁结束的回调
            complete: function () {
              //complete
            }
          });
        }
      })
    }
    // 返回裁切结果
    getResult().then(res => {
      wx.hideLoading();
      _this.eventChannel.emit('cropperSuccess', {
        data: _this.data.resultFiles
      });
      wx.navigateBack()
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.eventChannel = this.getOpenerEventChannel()
    this.eventChannel.on('propsObj', ({
      data,data:{imagePath:src}
    }) => {
      this.setData({
        images: data.images,
        aspectRatios: data.aspectRatios,
        aspectRatioVal: data.aspectRatio,
        info: data,
        src: src||data.images[0].path,
        resultFiles: data.imagePath ? '' : {}
      })
      this.backUrl = data.backUrl
      this.pos_images = data.images
      // 获取图片及裁切比例
      this.cropper = this.selectComponent('#cropper');
      this.InitPage(data)
    })

  },
  // 选择尺寸裁切
  onChange({
    detail
  }) {
    this.setData({
      aspectRatioVal: detail,
      resultFiles: !this.data.info.imagePath ? '' : {}
    })
    this.data.info.aspectRatio = detail
    this.InitPage(this.data.info)
  },
  // 切换图片裁切
  chooseImg({
    target
  }) {
    const _this = this
    const {
      img,
      index
    } = target.dataset
    this.setData({
      src: img,
      aspectRatios: index === 0 ? ['0.95', '0.77'] : []
    })
    this.data.info.imagePath = img

    this.cropFirst(this.data.index).then(res => {
      this.InitPage(this.data.info, img)
    }).then(res=>{
      this.setData({
      index
    })
    })

  },
  endChooseImg({target}){
  },
  // 切换图片及尺寸需要保存裁切
  cropFirst(index) {
    const _this = this;
    return new Promise((resolve, reject) => {
      // 选择前都将保存一次之前操作的剪切结果
      this.cropper.fnCrop({
        success({sWidth,sHeight,ratio,res}) {
          console.log(res);
          //生成文件的临时路径
          const path = res.tempFilePath
          const key = `resultFiles.key_${index}`
          _this.setData({
            [key]: {
              path,
              sHeight,
              sWidth,
              ratio
            }
          })
          resolve(true)
        },
        fail(err) {
          reject(false)
        }
      })
    })
  },
  // 初始化页面
  InitPage(data) {
    this.cropper.fnInit({
      imagePath: data.imagePath || data.images[0].path, //*必填
      debug: false, //可选。是否启用调试，默认值为false。true：打印过程日志；false：关闭过程日志
      outputFileType: 'jpg', //可选。目标文件的类型。默认值为jpg，jpg：输出jpg格式图片；png：输出png格式图片
      quality: 1, //可选。图片的质量。默认值为1，即最高质量。目前仅对 jpg 有效。取值范围为 (0, 1]，不在范围内时当作 1.0 处理。
      aspectRatio: data.aspectRatio || 2.34375, //可选。裁剪的宽高比，默认null，即不限制剪裁宽高比。aspectRatio需大于0
      minBoxWidthRatio: data.minBoxWidthRatio || 0.2, //可选。最小剪裁尺寸与原图尺寸的比率，默认0.15，即宽度最小剪裁到原图的0.15宽。
      minBoxHeightRatio: data.minBoxHeightRatio || 0.2, //可选。同minBoxWidthRatio，当设置 aspectRatio 时，minBoxHeight值设置无效。minBoxHeight值由minBoxWidth 和 aspectRatio自动计算得到。
      initialBoxWidthRatio: data.initialBoxWidthRatio || 0.6, //可选。剪裁框初始大小比率。默认值0.6，即剪裁框默认宽度为图片宽度的0.6倍。
      initialBoxHeightRatio: data.initialBoxHeightRatio || 0.6 //可选。同initialBoxWidthRatio，当设置aspectRatio时，initialBoxHeightRatio值设置无效。initialBoxHeightRatio值由initialBoxWidthRatio 和 aspectRatio自动计算得到。
    });
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }


})